<template>
  <div class="index">
    <div class="seach">
      <div class="logo">饿了么</div>
      <input @click="gosearch" type="text" placeholder="输入商家，商品名称" />
    </div>
    <div class="box">
      <h5>猜你喜欢</h5>
      <div class="nav">
        <p @click="sort3">综合排序↓</p>
        <p @click="sort1">距离最近</p>
        <p @click="sort2">销量最高</p>
        <p>筛选</p>
      </div>
      <div class="tuijian">
        <div>年货节热卖</div>
        <div>津贴联盟</div>
        <div>满减优惠</div>
        <div>品质联盟</div>
      </div>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="goshop(item)"
        >
          <div class="left">
            <div class="tu">
              <img :src="item.picUrl" alt="" />
            </div>
          </div>
          <div class="right">
            <h5>{{ item.name }}</h5>
            <div class="fankui">
              <span class="pingfen">⭐{{ item.wmPoiScore / 10 }}</span>
              <span class="xiaoliang">{{ item.monthSalesTip }}</span>
            </div>
            <div class="peisong">
              <span>{{ item.minPriceTip }}</span>
              <div class="you">
                <span>{{ item.deliveryTimeTip }}</span>
                <span>{{ item.distance }}</span>
              </div>
            </div>
            <div class="pingjia">
              <span>30-5</span>
            </div>
            <div class="youhuiquan">
              <span>70减35</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { shop_list } from "../../api/index";
import { ref, onMounted } from "vue";
//定义响应式数据
var list = ref([])

onMounted(()=>{
    shop_list().then((res)=>{
        console.log(res.data);
        list.value = res.data.list
    })
})



</script>

<style scoped>
.seach {
  height: 70px;
  background-color: blueviolet;
  padding: 10px;
}
.seach .logo {
  color: white;
  font-weight: 800;
}
.seach input {
  margin-top: 10px;
  height: 25px;
  font-size: 12px;
  text-align: center;
  width: 100%;
  border: 0;
  border-radius: 12px;
}
.box {
  margin: 10px;
}
.box h5 {
  font-size: 15px;
}
.box .nav {
  margin: 10px 0;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.box .tuijian {
  display: flex;
  justify-content: space-between;
}
.box .tuijian div {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  background-color: rgb(229, 229, 231);
}
.list {
  margin-top: 15px;
}

.list .item {
  display: flex;
  margin-bottom: 20px;
}
.list .item .left .tu {
  width: 80px;
  height: 80px;
  background-color: pink;
}
.list .item .left .tu img {
  width: 100%;
}
.list .item .right {
  margin-left: 10px;
  flex: 1;
}
.list .item .right h5 {
  font-size: 14px;
}
.list .item .right .fankui {
  margin-top: 10px;
  font-size: 12px;
  color: gray;
}
.list .item .right .peisong {
  font-size: 12px;
  margin-top: 5px;
  color: gray;
}
.list .item .right .peisong .you {
  float: right;
}
.list .item .right .pingjia,
.youhuiquan {
  font-size: 12px;
  margin-top: 10px;
}
.list .item .right .pingjia span {
  background-color: beige;
  margin-right: 8px;
  padding: 0 2px;
  box-sizing: border-box;
  border-radius: 2px;
  color: rgb(251, 65, 65);
}
.list .item .right .youhuiquan span {
  margin-right: 8px;
  color: rgb(251, 84, 84);
  border-radius: 2px;

  border: 1px solid red;
}
</style>